<template>
    <div class="auth select-country">
        <div class="container">
            <div class="header">
                <h1>實名認證</h1>
                <router-link tag='a' to='/user-center'><i class="el-icon-arrow-left"></i> 用戶中心</router-link>
            </div>
            <div class="form">
                <el-form :model="formData" :rules='rules' ref="ruleForm" label-width="140px">
                    <el-form-item label='所在國家' prop='nation_id'>
                        <el-select v-model="formData.nation_id" placeholder="請選擇所在國家" class='width100' >
                            <el-option 
                                v-for='item in $store.state.nation' 
                                :key='item.id' 
                                :label='`${item.title}-${item.code}`' 
                                :value='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='真實姓名' prop='real_name'>
                        <el-input placeholder="請輸入真實姓名" v-model='formData.real_name'></el-input>
                    </el-form-item>
                    <el-form-item label='銀行卡號' prop='id_card'>
                        <el-input placeholder="請輸入銀行卡號" v-model='formData.id_card' type="number"></el-input>
                    </el-form-item>
                    <el-form-item label='身份證正面照' prop='front_id_card'>
                        <el-upload
                            action="http://otc.xmobject.com/api/utility/upload"
                            :show-file-list="false"
                            :headers='headers'
                            :data="{type :'id_card'}"
                            name='img'
                            :on-success="frontUploadSuccess">
                            <img v-if="formData.front_id_card" :src="formData.front_id_card" class="avatar" style="width : 100px;">
                            <el-button type='primary' size="small" v-else>點擊上傳</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label='身份證正反照' prop='back_id_card'>
                        <el-upload
                            action="http://otc.xmobject.com/api/utility/upload"
                            :show-file-list="false"
                            :headers='headers'
                            :data="{type :'id_card'}"
                            name='img'
                            :on-success="backUploadSuccess">
                            <img v-if="formData.back_id_card" :src="formData.back_id_card" class="avatar" style="width : 100px;">
                            <el-button type='primary' size="small" v-else>點擊上傳</el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
                
                <el-button type='primary' class='width100' @click='submibAuthData'>提交認證資料</el-button>
                <!-- <div class="s-b auth-msg">
                    <div>
                        <h1>認證狀態</h1>
                        <p>未認證</p>
                        <p>人脸认证</p>
                        <p>证件认证</p>
                    </div>
                    <div>
                        <h1>累计交易限额</h1>
                        <p>2000CNY</p>
                        <p>无限额</p>
                        <p>10000CNY</p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
    import  { UserAuth } from '@/api/user'
    export default {
        data() {
            return {
                formData : {
                    nation_id : null,
                    real_name : null,
                    id_card : null,
                    front_id_card : null,
                    back_id_card : null
                },
                rules : {
                    nation_id : [{required :true, message : '請選擇所在國家'}],
                    real_name : [{required :true, message : '請輸入真實姓名'}],
                    id_card : [{required :true, message : '請填寫銀行卡號'}],
                    front_id_card : [{required :true, message : '請上傳身份證正面照'}],
                    back_id_card : [{required :true, message : '請上傳身份證反面照'}],
                },
                headers : {
                    "authorization":this.$store.state.userInfo.authorization
                }
            };
        },
        methods : {
            frontUploadSuccess (response) {
                if (response.code == 200) {
                    this.formData.front_id_card = response.result.avatar;
                    this.$message({
                        message : '上傳成功',
                        type : 'success'
                    })
                } else {
                    this.$message({
                        message : '上傳失敗',
                        type : 'error'
                    })
                }
            },
            backUploadSuccess (response) {
                if (response.code == 200) {
                    this.formData.back_id_card = response.result.avatar;
                    this.$message({
                        message : '上傳成功',
                        type : 'success'
                    })
                } else {
                    this.$message({
                        message : '上傳失敗',
                        type : 'error'
                    })
                }
            },
            submibAuthData () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        UserAuth({
                            nation_id : this.formData.nation_id,
                            real_name :this.formData.real_name,
                            id_card : this.formData.id_card,
                            front_id_card : this.formData.front_id_card,
                            back_id_card : this.formData.back_id_card
                        }).then(_ => {
                            this.$alert('認證資料提交成功，我們會儘快稽核，請耐心等待','提交成功', {
                                callback :action => {
                                    this.$router.back()
                                }
                            })
                        })
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .auth {
            background: #fff;
            padding: 50px 0;
            .container {
                // width: 1100px;
                margin: 0 auto;
                .header {
                    position: relative;
                    background: #f1f1f1;
                    h1 {
                        font-size: 16px;
                        font-weight: 550;
                        padding: 15px 0;
                        text-align: center;
                    }
                    a {
                        position: absolute;
                        top: 17px;
                        left: 7px;
                        font-size: 14px;
                    }
                }
                .form {
                    // width: 460px;
                    padding: 40px;
                    margin:50px auto;
                    padding-bottom: 100px;
                    .el-radio {
                        display: block;
                        margin-bottom: 15px;
                    }
                }
                .auth-msg {
                    margin-top: 50px;
                    h1 {
                        font-size: 15px;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }
                    p  {
                        font-size: 14px;
                        margin-bottom: 15px;
                        color: @textColorTwo;
                    }
                }
            }
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .auth {
            background: #fff;
            padding: 50px 0;
            .container {
                width: 1100px;
                margin: 0 auto;
                .header {
                    position: relative;
                    
                    background: #f1f1f1;
                    h1 {
                        font-size: 16px;
                        font-weight: 550;
                        padding: 15px 0;
                        text-align: center;
                    }
                    a {
                        position: absolute;
                        top: 17px;
                        left: 7px;
                        font-size: 14px;
                    }
                }
                .form {
                    width: 460px;
                    margin:50px auto;
                    padding-bottom: 100px;
                    .el-radio {
                        display: block;
                        margin-bottom: 15px;
                    }
                }
                .auth-msg {
                    margin-top: 50px;
                    h1 {
                        font-size: 15px;
                        font-weight: bold;
                        margin-bottom: 15px;
                    }
                    p  {
                        font-size: 14px;
                        margin-bottom: 15px;
                        color: @textColorTwo;
                    }
                }
            }
        }
    }
</style>